<template>
  <div style="display: flex; align-items: center">
    <div style="margin-right: 4px">
      <div v-if="isLoading"><img src="../assets/img/block/loading.svg" /></div>
      <div v-else :class="color"></div>
    </div>
    <p>{{ status }}</p>
  </div>
</template>

<script setup>
defineProps({
  isLoading: {
    default: false,
    type: Boolean,
  },
  color: {
    default: "green",
    type: String,
  },
  status: {
    default: "",
    type: String,
  },
});
</script>

<style lang="scss" scoped>
/* 定义动画 */
@keyframes light {
  from {
    transform: scale(0.5);
  }
  to {
    transform: scale(1);
  }
}
.red {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background-color: #e02020;
}

.green {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background-color: #01834e;
}

.gray {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background-color: #d9d9d9;
}
.blue {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background-color: #2186fb;
}
.blueing {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background-color: #2186fb;
  /* 使用动画 */
  animation: light 2s linear infinite alternate;
}
</style>
